<template>
    <div class="train-control-panel">

        <div>牵引模式</div>
        <div>
            <el-radio v-model="tractionMode" label="reverse">后退</el-radio>
            <el-radio v-model="tractionMode" label="idle">空挡</el-radio>
            <el-radio v-model="tractionMode" label="forward">前进</el-radio>
        </div>

        <el-progress type="dashboard" :percentage="throttle"></el-progress>
        <el-button-group>

            <el-button v-for="button of buttons" :type="button.value <= throttle ? 'primary' : 'default'"
                :key="button.name" @click="onThrottleButtonClick(button.value)">
                {{ button.name }}
            </el-button>

        </el-button-group>
        <div style="height: 500px; width: 100%;">
            <LogPanel ref="logPanel"></LogPanel>
        </div>
    </div>

</template>
<style lang="css">
.train-control-panel {
    display: flex;
    flex-direction: column;
}
</style>
<script lang="ts" setup>
import { ref } from "vue";
import { onBeforeMount } from "vue"
import LogPanel, { LogItemType } from "../LogPanel.vue"
import { WSSpeedControlMsg, TractionModes } from "../messages"
// import SwitchControl from "../SwitchControl.vue";
import { registerCallback, send } from "../ws"

type LogPanelType = InstanceType<typeof LogPanel>
const tractionMode = ref<TractionModes>("idle")
const throttle = ref<number>(0)


// 从菜单中搜索对应的组件

const buttons = ref<{ "name": string, 'text'?: string, "value": number, key: string }[]>([
    { "name": "0", value: 0, key: '0' },
    { "name": "1", value: 10, key: '1' },
    { "name": "2", value: 20, key: '2' },
    { "name": "3", value: 40, key: "3" },
    { "name": "4", value: 60, key: "4" },
    { "name": "5", value: 70, key: "5" },
    { "name": "6", value: 80, key: "6" },
    { "name": "7", value: 86, key: "7" },
    { "name": "8", value: 90, key: "8" },
    { "name": "9", value: 100, key: "9" },
])
const logPanel = ref<LogPanelType>()

const onThrottleButtonClick = (throttleValue: number) => {
    updateSpeedControl(throttleValue, tractionMode.value)
}

const updateSpeedControl = (throttleValue: number, tractionModeValue: TractionModes) => {
    throttle.value = throttleValue
    tractionMode.value = tractionModeValue
    const msg: WSSpeedControlMsg = {
        type: "throttle",
        train_name: "MyController",
        throttle_value: throttle.value,
        traction_mode: tractionMode.value
    }
    send(JSON.stringify(msg))
}

if (window.onkeyup == null) {
    window.onkeyup = (e: KeyboardEvent) => {
        console.log(e)
        const regex = /^[0-9]{1}$/;
        // 使用test方法检查字符串是否符合正则表达式
        if (e.key === " " || e.key == '`') {
            throttle.value = 0 // 按空格键或者`键，可紧急停车
            updateSpeedControl(0, tractionMode.value)
            return
        }
        // 按+或者-号进行方向的调节
        if (e.key === '=' || e.key == "-") {
            const nextStates: {
                [key: string]: {
                    [key in TractionModes]: TractionModes }
            } = {
                // =号就是+号，一个意思
                "=": { "idle": "forward", "reverse": "idle", "forward": "forward" },
                "-": { "idle": "reverse", "forward": "idle", "reverse": "reverse" },
            }
            updateSpeedControl(throttle.value, nextStates[e.key][tractionMode.value])
            return
        }
        // 调节速度
        if (regex.test(e.key)) {
            const btn = buttons.value.find((btn) => btn.key == e.key)
            if (!btn) {
                console.error(`cannot find btn for event ${e.key}`)
                return
            }
            updateSpeedControl(btn.value, tractionMode.value)
        }
    }
}

onBeforeMount(() => {
    registerCallback((data: LogItemType) => {
        if (logPanel.value == null) {
            console.error("logPanel is null")
            return
        }
        console.log(data)
        if (data.type === "log") {
            logPanel.value?.addLogItem(data)
        }
    })
})
</script>